<template>

  <el-dialog title="邮件模板内容" :visible.sync="visible" :close-on-click-modal="false" width="80%" append-to-body>
    <el-row :gutter="22">
      <el-col :span="12">
        <div>HTML源码</div>
        <br>
        <el-input
          type="textarea"
          :autosize="{ minRows: 20, maxRows: 40}"
          placeholder="请输入内容"
          v-model="value">
        </el-input>
      </el-col>
      <el-col :span="12">
        <div>内容预览</div>
        <br>
        <div v-html="value"></div>
      </el-col>
    </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="mini">取 消</el-button>
        <el-button @click="handleReset" size="mini">恢 复</el-button>
        <el-button @click="handleConfirm" size="mini" type="primary">应用编辑</el-button>
      </div>

  </el-dialog>

</template>

<script>

import ApiMain from '@/api/email.type';
import ApiSubInfo from '@/api/email.subInfo';

export default {
  mixins: [
  ],
  props: [
    'targetTypeOptions',
    'sendTypeOptions',
    'statusOptions',
  ],
  components: {
  },
  data () {
    return {
      visible: false,

      rawValue: '',
      value   : '',
    }
  },
  mounted () {
    // this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    show (rawValue) {
      this.rawValue = rawValue;
      this.handleReset();
      this.visible = true;
    },

    close () {
      this.visible = false;
      this.$emit('dialog-close');
    },

    // 应用
    handleConfirm () {
      this.$emit('on-confirm', this.value);
      this.close();
    },

    // 取消
    handleCancel () {
      this.close();
    },

    // 复位
    handleReset () {
      this.value = this.rawValue;
    },

  }
}
</script>

<style>

</style>
